<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title></title>
</head>
<body>

<img id="book"  alt="" width="100" height="123" style="background:red;opacity:1;position: relative; left: 500px;" />



<script type="text/javascript">
	
var book = document.getElementById('book')

animate(book, {
	left: 50,
	time: 2000
})

function animate(elem, options){
	//动画初始值
	var start = 500
	//动画结束值
	var end = options.left
	//动画id
	var timerId;
	var createTime = function(){
		return  (+new Date)
	}
	var startTime = createTime();
	//需要执行动画的长度
	var anminLength = start - end;
	//每13毫秒要跑的位置
	var pos = anminLength/options.time * 13
	var pre = start;
	var newValue;
	function tick(){		
		if(createTime() - startTime < options.time){
			newValue = pre - pos
			//动画执行
			elem.style['left'] = newValue + 'px';
			pre = newValue
		}else{
			//停止动画
			clearInterval(timerId);
			timerId = null;
			console.log(newValue)
		}
	}
	//开始执行动画
	var timerId = setInterval(tick, 13);
}

</script>

</body>
</html>